<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">

    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.min.css" rel="stylesheet"/>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
    <!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.1/libs/TXLivePlayer-1.2.0.min.js"></script>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/hls.min.0.13.2m.js"></script>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/flv.min.1.6.2.js"></script>
    <!--播放器脚本文件-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.v4.5.2.min.js"></script>
    <style>
        .player_user {
            position: absolute;
            top: 0px;
            color: white;
            left: 0;
            height: 30px;
            line-height: 30px;
            width: calc(100% - 25px);
            background-color: #00000030;
            padding: 0px 10px;
        }
        .player_user em {
            float: right;
            cursor: pointer;
            font-style: normal;
        }
        .player_user em:hover {
            color: red;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title layui_tab_title">
                <li class="layui-this"><a href="{:url('live/dashboard')}">直播视频监控</a></li>
                <li class=""><a href="{:url('chat/live_chat')}">直播间聊天监控</a></li>
            </ul>
        </div>

        <div class="layui-card-body">
            <div class="layui-row layui-col-space10">
                {empty name="lives"}
                <div class="layui-none" style="text-align: center;min-height: 300px">未查询到相关数据</div>
                {else /}
                {volist name='lives' id='live'}
                <div class="layui-col-md3">
                    <div class="layui-card" style="padding-top: 56%;">
                        <video id="id_player_{$i}" style="width:calc(100% - 5px); height:calc(100% - 5px);position: absolute;left: 0;top: 0;" preload="auto"></video>
                        <label class="player_user">
                            <span>{$live.anchor.nick_name|default=''}({$live.anchor.id|default=''})</span>
                        </label>
                    </div>
                </div>
                {/volist}
                {/empty}
            </div>
            {notempty  name="lives"}
            <div id="pager" style="margin-top: 20px;margin-left: 20px;"></div>
            {/notempty}
        </div>
    </div>
</div>

{include file='index/common' /}

<script src="/layuiadmin/layui/layui.js"></script>
<script src="/assets/ue/third-party/jquery-1.10.2.js"></script>
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'laypage'], function () {
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pager'
            , curr: {$page}
            , count: {$count}
            , limit: {$limit}
            , layout: ['prev', 'page', 'next', 'skip', 'count']
            , jump: function (obj, first) {
                if (!first) {
                    window.location.href = '{:url("live/dashboard")}?page=' + obj.curr;
                }
            }
        });
    });


    {volist name='lives' id='live'}
    // player-container-id 为播放器容器 ID，必须与 html 中一致
    var player = TCPlayer('id_player_{$i}', {});
    player.src('{:htmlspecialchars_decode($live.pull_url)}'); // url 播放地址
    {/volist}

</script>
</body>
</html>
